<template>
    <el-row>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                     <span style="margin-left:10px;">信息统计</span>
                </div>
                <el-select v-model="functionalModule" placeholder="请选择" style="margin-left:10px;margin-top:5px;">
                    <el-option
                        v-for="item in functionalModules"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-card>
        </el-col>
        <el-col :span="18">
            <el-card class="box-card-empty"></el-card>
        </el-col>
    </el-row>
    <el-row>
       <el-col :span="11" >
         <el-card class="box-card-dataCollect">
             <div slot="header" class="clearfix">
                     <span style="margin-left:10px;">统计信息</span>
                </div>
            <!-- table 或者 饼状图 -->
            <el-row style="margin-top:10px;margin-left:10px;">
                <el-col :span="10" style="margin-top:20px;">
                  <span>电网运行趋势演化分析</span>
                </el-col>
                <el-col :span="12">
                    <el-row >
                        <el-col >
                           <span>
                                热电联产机组1产电: {{agentScene.electronicOne}}
                            </span>   
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5px;">
                        <el-col>
                            <span>
                                热电联产机组2产电: {{agentScene.electronicTwo}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5px;">
                        <el-col>
                            <span>
                                储能电池1: {{agentScene.battaryOne}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5px;">
                        <el-col>
                            <span>
                                储能电池2: {{agentScene.battaryTwo}}
                            </span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <div class="custom-divider"></div>
            <el-row>
                <el-col :span="10" style="margin-top:10px;margin-left:10px;">
                    <span>电网未来态势分析</span>
                </el-col>
                <el-col :span="12">
                    <el-row>
                        <el-col>
                            <span>
                                电网负荷需求: {{agentScene.loadRequire}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <span>
                                光伏出力预测: {{agentScene.forecasting}}
                            </span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <span>
                                风电出力预测: {{agentScene.windElec}}
                            </span>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <div class="custom-divider"></div>
            <el-row>
                <el-col :span="10" style="margin-top: 5px;margin-left:10px;">
                    <span>电网量测异常抵御评估系数:</span>
                </el-col>
                <el-col :span="11">
                    <el-input style="width:80px;" disabled v-model="agentScene.coefficient"/>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" style="margin-top: 10px;margin-left:10px;">
                    <span>智能体与实际场景匹配度:</span>
                </el-col>
                <el-col :span="11" style="margin-top:10px;">
                    <el-input style="width:80px;" disabled v-model="agentScene.sceneMatchDegree"/>
                </el-col>
            </el-row>
         </el-card>
       </el-col>
       <el-col :span="13">
        <el-card class="box-card">
            <el-row>
                <el-col :span="9" style="margin-left:10px;">
                    <el-button type="primary" style="margin-left:40px;width:90px;" @click="jumpTable">列表</el-button>
                </el-col>
                <el-col :span="5" style="margin-left:40px;">
                    <el-button type="primary" style="margin-left:40px;" @click="jumpDialog">流程图</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <router-view />
                </el-col>
            </el-row>
        </el-card>
        <el-row>
            <el-col :span="24">

            </el-col>
        </el-row>
       </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import axios from "axios";
import {useRouter} from 'vue-router'
import { computed, defineComponent, onMounted, ref,watch } from "vue";
import {BASE_URL} from '@/utils/common.js'

const agentScene =ref({
    sceneMatchDegree:0.938,
    coefficient:0.936,
    electronicOne: '0.592602MW',
    electronicTwo: '0.256458MW',
    battaryOne: '0.599972MW',
    battaryTwo: '-0.199654MW',
    loadRequire: '10.555751MW',
    forecasting: '0MW',
    windElec: '1.237465MW',

})

const router = useRouter();

function jumpTable(){
    router.push({name:'informationTable',
    
        params:{
            paramName: functionalModule.value
        }
    });
   // router.push('/effect/optimaze-ctrl/optimaze-child3/information-table')
}

function jumpDialog(){
   router.push({name:'informationDialog',
    
        params:{
            paramName: functionalModule.value
        }
    });  
  //  router.push("/effect/optimaze-ctrl/optimaze-child3/information-dialog")
}

onMounted(
    ()=>{ jumpTable() }
)

const functionalModule = ref('历史统计信息')

const functionalModules = ref([ 
  { value: "历史统计信息", label: "历史统计信息" },
  { value: "当前统计信息", label: "当前统计信息" },
])

watch(functionalModule,(newVal,oldVal)=>{
   //alert("param1是::"+newVal);
     if( newVal ==='historyInfo'){
         agentScene.value={
            sceneMatchDegree:0.938,
            coefficient:0.936,
            electronicOne: '0.592602MW',
            electronicTwo: '0.256458MW',
            battaryOne: '0.599972MW',
            battaryTwo: '-0.199654MW',
            loadRequire: '10.555751MW',
            forecasting: '0MW',
            windElec: '1.237465MW',
         }
        // let obj =  functionalModules.value.find(item=> item.value===newVal)
        let obj = newVal
        console.log(obj)
        router.push({name:'informationTable',
            params:{
                paramName: obj
            }
        });

        functionalModule.value = obj
     }else{
        agentScene.value={
            sceneMatchDegree:0.938,
            coefficient:0.936,
            electronicOne: '0.592606MW',
            electronicTwo: '0.256408MW',
            battaryOne: '-0.598473MW',
            battaryTwo: '-0.199959MW',
            loadRequire: '10.576759MW',
            forecasting: '0MW',
            windElec: '1.234626MW',
        }
        // let obj=  functionalModules.value.find(item=> item.value===newVal)
        let obj = newVal
        console.log(obj)
        router.push({name:'informationTable',
            params:{
                paramName: obj
            }
        });

         functionalModule.value = obj
     }
    
   }
)

</script>

<style scoped lang="scss">
span{
    color: rgb(94,234,231);
}

.custom-divider {  
    position: relative;  
    height: 1px;  
    margin: 10px 0;  
    /* 其他样式... */  
  }  

   .box-card-dataCollect{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0px;
    background-color: rgb(26, 68, 94);
    border-width: 0;
    color: rgb(245, 245, 245);
    height: 380px;
  }

  .box-card {
  margin-bottom: 0px;
  background-color: rgb(26, 68, 94);
  color: rgb(245, 245, 245);
  border-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0px;
}

.box-card-empty{
    background-color: rgb(26, 68, 94);
    border-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0px;
    height: 95.5px;
}
</style>